<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- <meta http-equiv="refresh" content="10"> -->
	<title>Echart</title>	
	<script src="../static/js/echarts.min.js" ></script>
</head>
<body onload="loadXMLDoc('/rand')">
	<center><div id="main" style="width: 800px;height:300px;"></div></br>
	<div id="main2" style="width: 800px;height:80px;"></div>
	</center>
	
	<script type="text/javascript">
		var xmlhttp;
		var lastvalue;
		var option
		var myChart =echarts.init(document.getElementById('main'));

		option ={
			title:{
				text:'液压支柱压力'
			},
			tooltip:{},
			legend:{
				data:['压力值']
			},
			xAxis:{
				data:["第1架","第2架","第3架","第4架","第5架","第6架","第7架","第8架","第9架","第10架"]
			},
			yAxis: {},
			series:[{
				name:'压力值',
				type:'bar',
				data:[]
			}],
			color:["#2dd10c"]
		};

		function set (data) {
		    myChart.setOption({
		        series: [{
		            name: '销量',
		            type: 'bar',
		            data: data
		        }]
		    });	    
		}
					
		if (option && typeof option === "object") {
   		 	var startTime = +new Date();
   		 	myChart.setOption(option, true);
    		var endTime = +new Date();
    		var updateTime = endTime - startTime;
    		console.log("Time used:", updateTime);
		}

		function loadXMLDoc(url) {
			xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange=state_Change;
  			xmlhttp.open("GET",url,true);
  			xmlhttp.send(null);
  			//每1s调用自己
  			t = setTimeout(function () {
			 loadXMLDoc('/rand') ;
			}, 1000);
		}

		function state_Change()
		{
			if (xmlhttp.readyState==4)
 			 {// 4 = "loaded"
 				 if (xmlhttp.status==200)
    			{// 200 = OK
   					 var  value =xmlhttp.responseText;
   					 var len = value.length;
   					 lastvalue=value.substring(1,len-1).split(" ");//将字符串分离成数组
   					 set(lastvalue); //生成图表
   					  // document.getElementById('main2').innerHTML=lastvalue;
    			}
  			}
		}

		</script>
</body>
</html>